<template>
  <a-row :gutter="viewData.gutter">
    <a-form class="a-form-cls" ref="formRef" :model="formModel" :labelAlign="viewData.labelAlign">
      <template v-for="item in viewData.compsList">
        <parser :item="item" v-model="formModel[item['__vModel__']]" />
      </template>
    </a-form>
  </a-row>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import parser from '../../common/parser'
const props = defineProps({
  viewData: {
    type: Object,
    default: null
  }
})

const formRef = ref()
const formModel: any = reactive({})
props.viewData.compsList?.forEach((item: any) => {
  if ('__vModel__' in item) {
    let value = item.__config__?.defaultValue
    if (value !== '' && value !== null && value !== undefined) {
      try {
        switch (item.__config__.tag) {
          case 'a-range-picker':
            value = JSON.parse(value)
            break;

          default:
            break;
        }
      } catch (error) {
        switch (item.__config__.tag) {
          case 'a-range-picker':
            value = []
            break;

          default:
            break;
        }
      }
    } else {
      value = null
    }
    formModel[item['__vModel__']] = value
  }
})
type NamePath = string | number | (string | number)[]
const validate = (nameList?: NamePath) => {
  return formRef.value.validate(nameList)
}
const validateFields = (nameList?: NamePath) => {
  return formRef.value.validateFields(nameList)
}
defineExpose({ validate, validateFields })
</script>
<style lang="less" scoped>
.a-form-cls {
  width: 100%;
}
</style>